<div class="flex flex-col mb-8">
  <label for="demo-network-source">{{ 'PAC.ORGANIZATIONS_PAGE.Organization.SelectDataNetwork' | translate: {Default: 'Select Data Network'} }}</label>
  <mat-radio-group id="demo-network-source" [formControl]="source">
    <mat-radio-button [value]="OrganizationDemoNetworkEnum.github">GitHub</mat-radio-button>
    <mat-radio-button [value]="OrganizationDemoNetworkEnum.aliyun">Aliyun oss</mat-radio-button>
    <mat-radio-button [value]="null">Others</mat-radio-button>
  </mat-radio-group>

  @if (source.value === null) {
    <div class="flex items-center gap-2">
      <mat-form-field appearance="fill" class="w-full">
        <mat-label>{{ 'PAC.ORGANIZATIONS_PAGE.Organization.FileUrl' | translate: {Default: 'File Url'} }}</mat-label>
        <input matInput [formControl]="fileUrl" />
      </mat-form-field>
    </div>
  }

  <div class="text-sm opacity-50">
    {{ 'PAC.ORGANIZATIONS_PAGE.Organization.DataNetworkDescription' | translate: {Default: "The server will download the corresponding data files from this network storage for the import of demonstration data."} }}
  </div>
</div>

<div class="flex items-center gap-2">
  <button mat-raised-button color="primary" [disabled]="loading() || !source.value && !fileUrl.value" (click)="generate()">
    <div class="flex justify-center items-center">
      @if (loading()) {
        <mat-spinner color="accent" diameter="18"></mat-spinner>
      }
      
      @if (organization$()?.createdDemo || generated()) {
        <span>{{ 'PAC.ORGANIZATIONS_PAGE.Organization.RegenerateDemo' | translate: {Default: "Re-Generate Demo"} }}</span>
      } @else {
        <span>{{ 'PAC.ORGANIZATIONS_PAGE.Organization.GENERATE_DEMO' | translate: {Default: "Generate Demo"} }}</span>
      }
    </div>
  </button>
  @if (loading()) {
    <button mat-flat-button (click)="cancel()">
      {{ 'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}
    </button>
  }
</div>